<template>
  <q-modal v-model="opened" :content-css="{minWidth: '60vw', minHeight: '50vh'}"
           @hide="close" @show="$store.dispatch('fileReplace/open', pid)">
    <q-modal-layout ref="svgModal">
      <q-toolbar slot="header">
        <q-btn flat round dense @click="opened = false" icon="reply"/>
        <q-toolbar-title>文件替换</q-toolbar-title>
      </q-toolbar>
      <q-toolbar slot="footer">
        <q-btn flat @click.native="openVerify('stop')">开始替换</q-btn>
      </q-toolbar>
      <q-tabs animated swipeable inverted color="secondary" align="justify">
        <q-tab v-for="n in info" :key="n.hostname" :name="n.hostname" slot="title" :label="n.hostname"/>
        <q-tab-pane keep-alive v-for="n in info" :key="n.hostname" :name="n.hostname">
          <pre>{{fmt(n.result)}}</pre>
        </q-tab-pane>
      </q-tabs>
      <div class="row q-ma-lg">
        <div class="col-xs-12 col-sm-12 col-md-12">
          <q-select class="q-ma-sm" :error="$v.fields.host.$error" separator :options="host.items" clearable chips
                    multiple :float-label="$v.fields.host.$error ? '请输选择主机' : '替换主机'" v-model="fields.host"/>
        </div>
      </div>
    </q-modal-layout>
    <verify :vcodeDialog = "verifyDialog" @upVerify="$store.dispatch('fileReplace/fileReplace', pid)"
            :verifyTitle="verifyTitle" @clsVerify="$store.commit('fileReplace/closeVerifyDialog')" ></verify>
  </q-modal>
</template>

<script>
import { getFormatData } from 'plugins/common.js'
import { required } from 'vuelidate/lib/validators'
export default {
  name: 'FileReplace',
  data () {
    return this.$store.state.fileReplace
  },
  validations: {
    fields: {
      host: { required }
    }
  },
  props: {
    fileReplaceDialog: {
      type: Boolean,
      default: false
    },
    pid: {
      type: String,
      default: null
    }
  },
  methods: {
    openVerify (message) {
      this.$v.fields.$touch()
      if (this.$v.fields.$error) {
        this.$q.notify('请修正页面错误！')
        return
      }
      this.$store.commit('fileReplace/openVerify', message)
    },
    close () {
      this.$store.commit('fileReplace/close')
      this.$emit('clsFileReplace')
    },
    fmt (result) {
      return getFormatData(result)
    }
  },
  watch: {
    fileReplaceDialog () {
      this.opened = this.fileReplaceDialog
    }
  },
  components: {
    verify: () => import('components/verify/verify')
  }
}
</script>

<style>
</style>
